<template>
  <div class="echarts">
    <!-- <v-chart :options="polar" /> -->
    <div class="box1">
      <div class="title">
        <img src alt />
        <span>BaseLine</span>
        <span></span>
      </div>
      <div id="table1" class="table"></div>
    </div>
    <div class="box1">
      <div class="title">
        <img src alt />
        <span>Innovation</span>
        <span></span>
      </div>
      <div id="table2" class="table"></div>
    </div>
    <div class="box1">
      <div class="title">
        <img src alt />
        <span>LessionLearn</span>
        <span></span>
      </div>
      <div id="table3" class="table"></div>
    </div>
    <div class="box1">
      <div class="title">
        <img src alt />
        <span>Automation</span>
        <span></span>
      </div>

      <div class="flex">
        <div id="table4" class="subTable"></div>
        <div id="table5" class="subTable"></div>
      </div>
    </div>
  </div>
</template>

<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/polar'

export default {
  components: {
    'v-chart': ECharts
  },
  data() {
    return {
      option1: {},
      option2: {},
      option3: {},
      option4: {},
      option5: {}
    }
  },

  created() {
    this.initOPtions()
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.table1()
      this.table2()
      this.table3()
      this.table4()
      this.table5()
    },

    table1() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('table1'))
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(this.option1)
    },
    table2() {
      const myChart = this.$echarts.init(document.getElementById('table2'))
      myChart.setOption(this.option2)
    },
    table3() {
      const myChart = this.$echarts.init(document.getElementById('table3'))
      myChart.setOption(this.option3)
    },
    table4() {
      this.$nextTick(() => {
        const myChart = this.$echarts.init(document.getElementById('table4'))
        myChart.setOption(this.option4)
      })
    },
    table5() {
      const myChart = this.$echarts.init(document.getElementById('table5'))

      myChart.setOption(this.option5)
    },
    getTable5SData() {
      const arr = [
        { value: 16, name: 'TE' },
        { value: 20, name: 'ME' },
        { value: 30, name: 'IE' },
        { value: 18, name: 'MFG' },
        { value: 25, name: 'EHS' },
        { value: 28, name: 'QA' },
        { value: 35, name: 'HR' }
      ]

      //计算data中value的总和
      let a = 0
      for (let i = 0; i < arr.length; i++) {
        a += arr[i].value
      }
      //添加新的元素到data中，并设置其颜色样式为白色
      arr.push({
        value: a,
        name: '__other',
        itemStyle: { normal: { color: 'rgba(0,0,0,0)' } }
      })
      this.option5 = {
        tooltip: {
          trigger: 'item',
          formatter: function(param) {
            let str = '<style>td{padding:5px;}</style><table>'
            let c = (param['value'] / a) * 100
            c = c.toFixed(2)
            str = str + c + '%'
            return str
          }
        },
        grid: {
          top: '50px',
          left: '50px',
          right: '15px',
          bottom: '50px'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            startAngle: 180,
            radius: ['30%', '70%'],
            center: ['50%', '60%'],
            data: arr,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    },
    initOPtions() {
      this.getTable5SData()
      this.option1 = {
        title: {
          text: '' //标题
        },
        tooltip: {},
        legend: {
          data: [''] //类表
        },
        xAxis: {
          data: ['TE', 'ME', 'IE', 'MFG', 'EHS', 'QA', 'HR']
        },
        yAxis: {
          max: 800
        },
        series: [
          {
            name: '', //
            type: 'bar',
            data: [300, 250, 200, 180, 190, 200, 185],
            barWidth: 50, //柱图宽度
            smooth: true, //设置折线为圆滑曲线,false则有转折点
            //配置样式
            itemStyle: {
              //通常情况下：
              normal: {
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                color: function(params) {
                  const colorList = [
                    '#0679e3',
                    '#3d97ed',
                    '#90c1fc',
                    '#07b8d9',
                    '#62c4db',
                    '#86e9fc'
                  ]
                  return colorList[params.dataIndex]
                }
              },
              //鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      this.option2 = {
        // backgroundColor: 'white',

        title: {
          // text: 'Customized Pie',
          // left: 'center',
          // top: 20,
          // textStyle: {
          //     color: '#ccc'
          // }
        },

        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },

        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {
            colorLightness: [0, 1]
          }
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 274, name: '联盟广告' },
              { value: 235, name: '视频广告' },
              { value: 400, name: '搜索引擎' }
            ].sort(function(a, b) {
              return a.value - b.value
            }),
            roseType: 'radius',
            label: {
              color: 'black'
            },
            labelLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.3)'
              },
              smooth: 0.2,
              length: 10,
              length2: 20
            },
            itemStyle: {
              color: '#c23531'
              //   shadowBlur: 200,
              //   shadowColor: 'rgba(0, 0, 0, 0.5)',
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function(idx) {
              return Math.random() * 200
            }
          }
        ]
      }
      this.option3 = {
        title: {
          // text: '动态数据',
          // subtext: '纯属虚构'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#283b56'
            }
          }
        },
        legend: {
          data: ['最新成交价', '预购队列']
        },

        dataZoom: {
          show: false,
          start: 0,
          end: 100
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,
            data: [5, 10, 20, 25, 30, 35]
          },
          {
            type: 'category',
            boundaryGap: true,
            data: [5, 10, 20, 25, 30, 35]
          }
        ],
        yAxis: [
          {
            type: 'value',
            scale: true,
            name: '价格',
            max: 500,
            min: 0,
            boundaryGap: [0.2, 0.2],

            //配置样式
            itemStyle: {
              //通常情况下：

              normal: {},
              //鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          {
            type: 'value',
            scale: true,
            name: '预购量',
            max: 1200,
            min: 0,
            boundaryGap: [0.2, 0.2],
            //配置样式
            itemStyle: {
              //通常情况下：
              normal: {
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                color: ''
              },
              //鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ],
        series: [
          {
            name: '预购队列',
            type: 'bar',
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: [300, 250, 200, 180, 190, 200, 185],
            barWidth: 50, //柱图宽度
            smooth: true, //设置折线为圆滑曲线,false则有转折点
            //配置样式
            itemStyle: {
              //通常情况下：
              normal: {
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                color: function(params) {
                  const colorList = [
                    '#0679e3',
                    '#3d97ed',
                    '#90c1fc',
                    '#07b8d9',
                    '#62c4db',
                    '#86e9fc'
                  ]
                  return colorList[params.dataIndex]
                }
              },
              //鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          {
            name: '最新成交价',
            type: 'line',
            data: [20, 80, 120, 160, 200, 250, 350],
            barWidth: 30, //柱图宽度
            lineStyle: {
              width: 3, //折线宽度 //折线颜色渐变
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: 'rgba(45,105,249,1)'
                },
                {
                  offset: 1,
                  color: 'rgba(89,205,253,1)'
                }
              ])
            },
            //配置样式
            itemStyle: {
              //通常情况下：
              normal: {
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                color: function(params) {
                  const colorList = [
                    '#0679e3',
                    '#3d97ed',
                    '#90c1fc',
                    '#07b8d9',
                    '#62c4db',
                    '#86e9fc'
                  ]
                  return colorList[params.dataIndex]
                }
              },
              //鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      this.option4 = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        // legend: {
        //     orient: 'vertical',
        //     left: 10,
        //     data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        // },
        series: [
          {
            name: '部门数据',
            type: 'pie',
            radius: ['80%', '32%'],
            avoidLabelOverlap: false,
            itemStyle: {
              //通常情况下：
              normal: {
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                color: function(params) {
                  const colorList = [
                    '#0679e3',
                    '#3d97ed',
                    '#90c1fc',
                    '#07b8d9',
                    '#62c4db',
                    '#86e9fc'
                  ]
                  return colorList[params.dataIndex]
                }
              },
              //鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },

            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 16, name: 'TE' },
              { value: 20, name: 'ME' },
              { value: 30, name: 'IE' },
              { value: 18, name: 'MFG' },
              { value: 25, name: 'EHS' },
              { value: 28, name: 'QA' },
              { value: 35, name: 'HR' }
            ]
          }
        ]
      }
    }
  }
}
</script>
<style lang="less" scoped>
.flex {
  display: flex;
}
.echarts {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  .box1 {
    width: 50%;
    height: 500px;
  }
  .title {
    font-size: 25px;
    margin-left: 32px;
    margin-top: 20px;
    display: inline-block;
  }
  .table {
    width: 100%;
    height: 80%;
  }
  .subTable {
    width: 300px;
    height: 380px;
    display: inline-block;
  }
}
</style>
